{% extends "base-admin.html.twig" %}
{% block titulo 'Registrar Auto' %}
{% block includes%}
<script type="text/javascript">
            $(document).ready(function(){
                $.validator.addMethod("alphanumeric", function(value, element) {
                    return this.optional(element) || /^[a-z0-9\-]+$/i.test(value);
                }, "Este campo debe tener solo letras numeros y guiones.");
                $("#registrar").validate({
                    rules: {
                        precio:{
                            digits:true,
                            min:1000},
                        placa:{
                            alphanumeric:true
                        },
                        foto1: {
                            required: true,
                            accept: "jpg|png"
                        },
                        foto2: {
                            accept: "jpg|png"
                        },
                        foto3: {
                            accept: "jpg|png"
                        },
                        foto4: {
                            accept: "jpg|png"
                        },
                        foto5: {
                            accept: "jpg|png"},
                        caracteristicas:{
                            maxlength: 500
                        }
                    },
                    messages:{
                        precio:{digits:"Por favor, no incluya puntos ni comas en el precio"}
                    },
                    submitHandler:function(){
                        if($("#registrar").valid()){
                            mensaje = "<div class='info'><img src='../images/info.png' /><p>Cargando, por favor espere</p></div>";
                            $.fancybox(mensaje,
                            {
                                'autoDimensions'    : false,
                                'modal'                    :true,
                                'width'                     : 350,
                                'height'                   : 'auto',
                                'transitionIn'           : 'none',
                                'transitionOut'        : 'none'
                            }
                        );
                            registrar.submit();
                        }
                    }
                });
            });
    </script>
<style media="all" type="text/css">
            #col2{width: 100%; padding: 0;}
            form.columnar div.type-text input[type="text"]{
                width: 66.8%;
            }
        </style>
{% endblock %}
{% block content %}
        <form name="registrar" id="registrar" action="" class="yform columnar" method="post" enctype="multipart/form-data">
            <input type="hidden" name="vendido" value="0"/>
            {% for error in auto.errores%}
            <div class="error">
                <label>Error</label>
                <p class="message"> {{error}} </p>
            </div>
            {% endfor %}
            <fieldset>
                <legend>Datos del Vehículo</legend>
                <div class="subcolumns">
                    <div class="c50l">
                        <div class="type-select">
                            <label for="tipovehiculo">Tipo de vehículo <sup>*</sup> </label>
                            <select name="tipovehiculo" class="required">
                                <option value="">--</option>
                                {% for tipo in tipoVehiculo.data %}
                                <option value="{{ tipo.idtipovehiculo }}">{{ tipo.tipovehiculo }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="type-select">
                            <label for="marca">Marca<sup>*</sup> </label>
                            <select name="marca" id="marcas" class="required">
                                <option> -- </option>
                            </select>
                        </div>
                        <div class="type-select">
                            <label for="modelo">Modelo <sup>*</sup></label>
                            <select name="modelo" id="modelos" class="required">
                                <option value=""> -- </option>
                            </select>
                        </div>
                        <div class="type-select">
                            <label for="fecha">Año<sup>*</sup> </label>
                            <select name="fecha" class="required">
                                <option value="" class="number"> -- </option>
                                {%for i in "now"|date('Y')..1900 %}
                                <option>{{i}} </option>
                                {%endfor%}                                
                            </select>
                        </div>
                    </div>
                    <div class="c50r">
                        <div class="type-text">
                            <label for="recorrido">Recorrido (Km) </label>
                            <input type="text" name="recorrido" class="number"/>
                        </div>
                        <div class="type-text">
                            <label for="version">Versión</label>
                            <input type="text" name="version"/>
                        </div>
                        <div class="type-select">
                            <label for="color">Color<sup>*</sup></label>
                            <select name="color" class="required">
                                <option value="null"> -- </option>
                                {%for color in coloresVehiculo.data%}
                                <option value="{{color.id}}">{{color.nombre}} </option>
                                {%endfor%}
                            </select>
                        </div>
                        <div class="type-text">
                            <label for="placa">Placa </label>
                            <input type="text" name="placa"/>
                        </div>
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>Motor</legend>
                <div class="subolumns">
                    <div class="c50l">
                        <div class="type-text">
                            <label for="motor">Motor <sup>*</sup> </label>
                            <input type="text" name="motor"  class="required"/>
                        </div>
                        <div class="type-select">
                            <label for="transmision">Transmisión <sup>*</sup> </label>
                            <select name="transmision"  class="required">
                                <option value=""> -- </option>
                                {% for transmision in transmisionVehiculo.data %}
                                <option value="{{transmision.idtransmisionvehiculo}}">{{transmision.transmisionvehiculo}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="c50r">
                        <div class="type-text">
                            <label for="cilindros">N° Cilindros<sup>*</sup></label>
                            <input type="text" name="cilindros" class="required number"/>
                        </div>
                        <div class="type-text">
                            <label for="traccion">Tracción<sup>*</sup></label>
                            <select name="traccion" class="required">
                                <option value="">--</option>
                                {%for traccion in traccionVehiculo.data%}
                                <option value="{{traccion.idtraccionvehiculo}}">{{traccion.traccionvehiculo}}</option>
                                {%endfor%}
                            </select>
                        </div>
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>Accesorios</legend>
                <div class="subcolumns">
                    <div class="c50l">
                        <div class="type-select">
                            <label for="vidrios">Vidrios<sup>*</sup></label>
                            <select name="vidrios" class="required">
                                <option value="null">-- Seleccione</option>
                                <option value="0">Ahumados</option>
                                <option value="1">Normales</option>
                            </select>
                        </div>
                        <div class="type-select">
                            <label for="tapizado">Tapizado<sup>*</sup></label>
                            <select name="tapizado" class="required">
                                <option value="null">-- Seleccione</option>
                                <option value="0">Tela</option>
                                <option value="1">Cuero</option>
                            </select>
                        </div>
                        <div class="type-select">
                            <label for="airbag">Airbag<sup>*</sup></label>
                            <select name="airbag" class="required">
                                <option value="">-- Seleccione</option>
                                <option value="1">SI</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                        <div class="type-select">
                            <label for="frenosabs">Frenos ABS<sup>*</sup></label>
                            <select name="frenosabs" class="required">
                                <option value="">-- Seleccione</option>
                                <option value="1">SI</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                    </div>
                    <div class="c50r">
                        <div class="type-select">
                            <label for="direccion">Dirección <sup>*</sup> </label>
                            <select name="direccion" class="required">
                                <option value="">--</option>
                                {%for direccion in direccionVehiculo.data%}
                                <option value="{{direccion.iddireccionVehiculo}}">{{direccion.direccionVehiculo}}</option>
                                {%endfor%}
                            </select>
                        </div>
                        <div class="type-select">
                            <label for="aireacondicionado">Aire Acondicionado<sup>*</sup></label>
                            <select name="aireacondicionado" class="required">
                                <option value="">-- Seleccione</option>
                                <option value="1">SI</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                        <div class="type-select">
                            <label for="estereo">Estereo <sup>*</sup></label>
                            <select name="estereo" class="required">
                                <option value="">-- Seleccione</option>
                                <option value="1">SI</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                        <div class="type-select">
                            <label for="blindado">Blindado<sup>*</sup></label>
                            <select name="blindado" class="required">
                                <option value="">-- Seleccione</option>
                                <option value="1">SI</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>Otras caracteristicas</legend>
                <div class="type-text">
                    <label for="caracteristicas">Características</label>
                    <textarea cols="3" rows="3" name="caracteristicas"></textarea>
                </div>
            </fieldset>
            <fieldset>
                <legend>Precio</legend>
                <div class="sucolumns">
                    <div class="c50l">
                        <div class="type-text">
                            <label for="precio">Precio<sup>*</sup> </label>
                            <input type="text" name="precio" class="required number"/>
                        </div>
                    </div>
                    <div class="c50r">
                        <div class="type-select">
                            <label for="negociable">Negociable <sup>*</sup> </label>
                            <select name="negociable" class="required">
                                <option value="">-- Seleccione</option>
                                <option value="1">SI</option>
                                <option value="0">NO</option>
                            </select>
                        </div>
                    </div>
                </div>
            </fieldset>
            <fieldset>
                <legend>Fotos</legend>
                <div class="type-text">
                    <label for="fotos">Foto Principal <sup>*</sup> </label>
                    <input type="file" name="foto1" class="required"/>
                    <label for="fotos">Foto </label>
                    <input type="file" name="foto2"/>
                    <label for="fotos">Foto </label>
                    <input type="file" name="foto3"/>
                    <label for="fotos">Foto </label>
                    <input type="file" name="foto4"/>
                    <label for="fotos">Foto </label>
                    <input type="file" name="foto5"/>
                </div>
            </fieldset>
            <fieldset>
                <legend>Acción</legend>
                <div class="type-button">
                    <p align="right">
                        <input type="reset" name="borrar" value="Resetear"/>
                        <input type="submit" name="enviar" value="Enviar"/>
                    </p>
                </div>
            </fieldset>
        </form>
        <div class="floatbox">
            <center>
                <img alt="volver" hspace="3" align="middle" src="../images/config.png"/>
                <a href="../usuarios">Volver al menú</a>
            </center>
        </div>
{% endblock %} 